<template>
	<div class="singer-album">
		<!-- 切换显示模式按钮 -->
		<div class="btn">
			<el-tooltip effect="dark" content="大图模式" placement="left">
				<span class="iconfont icon-card" @click="showList" :class="{ active: isShowList }"></span>
			</el-tooltip>
			<el-tooltip effect="dark" content="列表模式" placement="right">
				<span class="iconfont icon-biaogebeifen" @click="showTable" :class="{ active: isShowTable }"></span>
			</el-tooltip>
		</div>
		<!-- 显示专辑 -->
		<AlbumTable :albumlist="albumlist" v-if="isShowTable" />
		<Albumlist :albumlist="albumlist" v-else-if="isShowList" />
	</div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import Albumlist from "@/components/content/albumlist/Albumlist.vue";
import AlbumTable from "@/components/content/albumlist/AlbumTable.vue";


const props = defineProps({
  albumlist: {
    type: Array,
    default: () => []
  }
});


const isShowTable = ref(false);  
const isShowList = ref(true);   

// 切换专辑显示模式
const showTable = () => {
  isShowList.value = false;
  isShowTable.value = true;
};

const showList = () => {
  isShowList.value = true;
  isShowTable.value = false;
};
</script>

<style lang="less" scoped>
.btn {
	cursor: pointer;
	padding-bottom: 10px;
	span {
		padding-left: 10px;
	}
	.iconfont {
		font-size: 22px;
	}
	.active {
		color: var(--themeColor);
	}
}
</style>
